/* ================
		字体
================ */
.com-text-xs {
  color: $com-color-tips;
  font-size: $com-text-xs;
}

.com-text-sm {
  color: $com-color-tips;
  font-size: $com-text-sm;
}

.com-text-md {
  font-size: $com-text-md;
}

.com-text-lg {
  color: $com-color-main;
  font-size: $com-text-lg;
}

.com-text-xl {
  color: $com-color-main;
  font-size: $com-text-xl;
}

@for $i from 10 through 50 {
  .com-text-#{$i} {
    font-size: unit($i);
  }
}

/* ================
		文本
================ */
.com-text-left {
  text-align: left;
}

.com-text-center {
  text-align: center;
}

.com-text-right {
  text-align: right;
}

.com-text-bold {
  font-weight: bold;
}

@for $i from 1 through 10 {
  .com-line-clamp-#{$i} {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;

    /* #ifdef APP-NVUE */
    // nvue下，可以直接使用lines属性，这是weex特有样式
    lines: $i;

    /* #endif */

    /* #ifndef APP-NVUE */
    // vue下，单行和多行显示省略号需要单独处理
    @if $i == '1' {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    } @else {
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: $i;
      -webkit-box-orient: vertical !important;
    }

    /* #endif */
  }
}

.com-underline {
  color: $com-color-light;
  text-decoration-line: underline;
}

.com-line-through {
  color: $com-color-light;
  text-decoration: line-through;
}

.com-uppercase {
  text-transform: uppercase;
}

.com-lowercase {
  text-transform: lowercase;
}

.com-capitalize {
  text-transform: capitalize;
}

.com-break-words {
  overflow-wrap: break-word;
}

.com-break-all {
  word-break: break-all;
}

.com-break-keep {
  word-break: keep-all;
}
